<script lang="ts">
  import LeftChart from "./leftChart.svelte";
  import RightChart from "./rightChart.svelte";
  import TopChart from "./topChart.svelte";
  import TopCenter from "./topCenter.svelte";
  import SuperMap2D from "../components/superMap2D.svelte";
  import { getStorage } from "../utils/common";
  import { selectCmsStatistics, getDpFictitiousStatistics } from "../api/index";
  import { onMount } from "svelte";
  import mainbg from "/index_bg.png";
  import index_lbx from "/index_lbx.png";

  let pageData: Record<string, any> = {};
  let dpFictitiousStatisticsData: Record<string, any>[] = [];
  let key = 0;
  let lastRefreshTime = 0;
  const REFRESH_INTERVAL = 1000 * 60 * 2; // 2分钟刷新一次
  let animationFrameId: number;

  const getPageData = async () => {
    try {
      const { data } = await selectCmsStatistics();
      pageData = data;
    } catch (error) {
      console.error("获取页面数据失败:", error);
    }
  };

  const dpFictitiousStatistics = async () => {
    try {
      const { data } = await getDpFictitiousStatistics();
      dpFictitiousStatisticsData = [...data];
    } catch (error) {
      console.error("获取统计数据失败:", error);
    }
  };

  const refreshData = async () => {
    lastRefreshTime = Date.now();
    await Promise.all([getPageData(), dpFictitiousStatistics()]);
    key += 1;
    console.log("数据已刷新", new Date().toLocaleTimeString());
  };

  // 使用requestAnimationFrame实现连续检查
  const checkAndRefresh = async () => {
    const now = Date.now();
    
    // 如果距离上次刷新已经过了指定的时间间隔
    if (now - lastRefreshTime >= REFRESH_INTERVAL) {
      await refreshData();
    }
    
    // 继续下一帧检查
    animationFrameId = requestAnimationFrame(checkAndRefresh);
  };

  onMount(async () => {
    // 初始加载数据
    await refreshData();
    
    // 开始连续检查
    animationFrameId = requestAnimationFrame(checkAndRefresh);
    
    return () => {
      // 清理
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
      }
    };
  });
</script>

{#key key}
  <div
    class="screen-wrapper fixed inset-0 w-full h-full"
    style="background: url({mainbg}) no-repeat center center / cover"
  >
    <div class="screen-content flex flex-col w-full h-full">
      <!-- 旋转图标放在最底层 -->
      <div
        class="absolute w-[30%] h-[40%] top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 z-0"
      >
        <img src={index_lbx} alt="" class="w-full object-cover animate-lbx" />
      </div>

      <!-- 顶部导航栏，使用flex-none确保它不会被拉伸 -->
      <div class="w-full flex-none" style="height: 9%">
        <TopChart />
      </div>

      <!-- 主要内容区域，使用flex-grow填充剩余空间 -->
      <div class="relative w-full h-[calc(100%-10%)] mt-4 overflow-hidden">
        <div
          class="absolute z-10 top-0 left-1/2 transform -translate-x-1/2 w-[60%]"
        >
          <TopCenter {pageData} />
        </div>
        <div
          class="absolute inset-0 top-[18%] left-1/2 transform -translate-x-1/2 w-[40%] h-[calc(100%-12rem)]"
        >
          <SuperMap2D />
        </div>
        <div class="absolute z-10 top-0 left-0 w-[28%] h-[calc(100%)]">
          <LeftChart {pageData} {dpFictitiousStatisticsData} />
        </div>
        <div class="absolute z-10 top-0 right-0 w-[28%] h-[calc(100%)]">
          <RightChart {pageData} />
        </div>
      </div>
    </div>
  </div>
{/key}

<style>
  .screen-wrapper {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
  }
  .screen-content {
    position: relative;
    transition: transform 0.3s;
    transform-origin: center center;
    will-change: transform;
  }
  .flex {
    display: flex;
  }
  .zindex {
    z-index: 1000;
  }
  .animate-lbx {
    animation: lbx 20s linear infinite;
  }
  @keyframes lbx {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
